<template>
  <div id="app">
    <!-- 操作面板 div -->
    <div>
      <div>
        <span>姓名:</span>
        <input type="text" v-model.trim="stuObj.name" />
      </div>
      <div>
        <span>年龄:</span>
        <input type="number" v-model.number="stuObj.age" />
      </div>
      <div>
        <span>性别:</span>
        <select v-model="stuObj.gender">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div>
        <button @click="doOperate">添加/修改</button>
      </div>
    </div>
    <hr />

    <!-- 数据表格面板 div -->
    <div>
      <table border="1" cellpadding="10" cellspacing="0">
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <!-- 遍历生成 行 -->
        <tr v-for="stu in stuList" :key="stu.id">
          <td>{{ stu.id }}</td>
          <td>{{ stu.name }}</td>
          <td>{{ stu.age }}</td>
          <td>{{ stu.gender }}</td>
          <td>
            <button @click="doDel(stu.id)">删除</button>
            <button @click="doEdit(stu.id)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 修改标志位（正在修改的学员对象 / null）
      editTarget: null,
      // 表单数据对象
      stuObj: {
        name: "",
        age: 0,
        gender: "男",
      },
      // 学员数据数组
      stuList: [{ id: 1, name: "小白", age: 18, gender: "男" }],
    };
  },
  methods: {
    // 1.新增/确定修改 方法-----------------------------------
    doOperate() {
      // 1.1 执行修改操作
      if (this.editTarget) {
        // 将 表单数据 设置给 被修改的 学员对象
        this.editTarget.name = this.stuObj.name;
        this.editTarget.age = this.stuObj.age;
        this.editTarget.gender = this.stuObj.gender;
        // 清空标志位
        this.editTarget = null;
      }
      // 1.2 执行新增操作
      else {
        // 生成id
        const newId =
          this.stuList.length === 0
            ? 1
            : this.stuList[this.stuList.length - 1].id + 1;

        // 设置给 新对象（copy js对象）
        const newStu = { id: newId, ...this.stuObj };

        // 将新对象 加到 数组中
        this.stuList.push(newStu);
      }
      alert("操作成功~！");
    },
    // 2.删除方法--------------------------------------------
    doDel(delId) {
      // a.根据id找下标
      const i = this.stuList.findIndex((e) => e.id === delId);
      // b.根据下标删除元素
      i > -1 && this.stuList.splice(i, 1);
    },
    // 3.编辑方法--------------------------------------------
    doEdit(delId) {
      // a.根据id找对象
      const stu = this.stuList.find((e) => e.id === delId);
      // b.将对象属性值 设置给 表单对象的同名属性值
      this.stuObj.name = stu.name;
      this.stuObj.age = stu.age;
      this.stuObj.gender = stu.gender;
      // c.将 正在编辑的学员数据对象 保存到 标志位中
      this.editTarget = stu;
    },
  },
};
</script>

<style scoped>
#app {
  margin: 10px;
}
</style>